<template>
  <!-- 编辑框 -->
  <a-modal
      :title="title"
      :visible="dialog"
      @ok="submitForm"
      @cancel="handleCancel"
      width="500px"
  >
    <a-form-model ref="form"
                  :model="form"
                  :rules="rules">
      <a-row  >
        <a-col >
          <a-form-model-item label="年级" prop="gradeId" class="row">
            <a-select
                showSearch
                :filter-option="filterOption"
                v-model="form.gradeId"
                placeholder="请选择年级">
              <a-select-option
                  v-for="grade in grades"
                  :key="grade.id"
                  :value="grade.id"
              >{{grade.grade}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="专业" prop="majorId" class="row">
            <a-select
                showSearch
                :filter-option="filterOption"
                v-model="form.majorId"
                placeholder="请选择专业">
              <a-select-option
                  v-for="major in majors"
                  :key="major.id"
                  :value="major.id"
              >{{major.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="课程" prop="courseId" class="row">
            <a-select
                showSearch
                :filter-option="filterOption"
                v-model="form.courseId"
                placeholder="请选择课程">
              <a-select-option
                  v-for="course in courses"
                  :key="course.id"
                  :value="course.id"
              >{{course.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="理论学时" prop="theoretical" class="row">
            <a-input v-model="form.theoretical" type="number" />
          </a-form-model-item>
          <a-form-model-item label="实验学时" prop="experimental" class="row">
            <a-input v-model="form.experimental" type="number" />
          </a-form-model-item>
          <a-form-model-item label="学分" prop="credit" class="row">
            <a-input v-model="form.credit" type="number" />
          </a-form-model-item>
          <a-form-model-item label="考核方式" prop="method" class="row">
            <a-select
                showSearch
                :filter-option="filterOption"
                v-model="form.method"
                placeholder="请选择考核方式">
              <a-select-option value="0">考察</a-select-option>
              <a-select-option value="1">考试</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="学期" prop="term" class="row">
            <a-select
                showSearch
                :filter-option="filterOption"
                v-model="form.term"
                placeholder="请选择学期">
              <a-select-option
                  v-for="value in terms"
                  :key="value"
                  :value="value"
              >{{value}}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import {editProgram} from "@/services/program";
const defaultForm = {
  gradeId: '',
  majorId: '',
  courseId: '',
  theoretical: '',
  experimental: '',
  credit: '',
  method: '',
  term: ''
};

export default {
  name: "FormDialog",
  props: {
    grades: [],
    majors: [],
    courses: [],
    terms: []
  },
  data() {
    const checkCredit = (rule, value, cb) => {
      if (value > 0) {
        return cb()
      }
      cb(new Error('学分应该大于0'))
    }
    return {
      title: "添加",
      dialog: false,
      isModalVisible: false,
      loading: true,
      form: {},
      rules: {
        gradeId: [
          { required: true, message: '请选择年级', trigger: 'blur' },
        ],
        majorId: [
          { required: true, message: '请选择专业', trigger: 'blur' },
        ],
        courseId: [
          { required: true, message: '请选择课程', trigger: 'blur' },
        ],
        theoretical: [
          { required: true, message: '请输入理论学时', trigger: 'blur' },
          { pattern: /^[0-9]\d*$/, required: true, message: "请输入自然数", trigger: "blur" },
        ],
        experimental: [
          { required: true, message: '请输入实验学时', trigger: 'blur' },
          { pattern: /^[0-9]\d*$/, required: true, message: "请输入自然数", trigger: "blur" },
        ],
        credit: [
          { required: true, message: '请输入课程学分', trigger: 'blur' },
          { validator: checkCredit, trigger: 'blur' }
        ],
        method: [
          { required: true, message: '请选择考核方式', trigger: 'blur' },
        ],
        term: [
          { required: true, message: '请选择学期', trigger: 'blur' },
        ],
      }
    };
  },
  watch: {
  },
  created() {
    this.form = Object.assign({}, defaultForm);
  },
  methods: {
    resetForm() {
      this.form = Object.assign({}, defaultForm);
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          const program = this.form;
          const that = this;
          editProgram(program)
              .then((resp) => {
                let result = resp.data;
                if (result.code == 200) {
                  that.$message.success("操作成功", 2);
                  this.$emit("success");
                  that.resetForm();
                }else {
                  that.$message.error(result.message)
                }
                that.dialog = false;
              })
              .catch((res) => {
                this.loading = false;
                this.$message.error(res.response.data.message);
              });
          this.$emit("success");
          this.handleCancel();
        }
      });
    },
    handleCancel() {
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
      this.form = Object.assign({}, defaultForm);
      this.loading = false;
      this.dialog = false;
    },
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style type="text/css">
.row {
  margin: 0 auto;
}
</style>
